<template>
    <div>
        <div style="margin-bottom: 10px;">
            <span style="margin-right:5px;">设备</span>
            <ClientSelect v-model="lanip_data.client_id" style="width: 200px;margin-right:15px;"></ClientSelect>
            <span style="margin-right:5px;">设备名称</span>
            <Input v-model="lanip_data.lanip_name" style="width: 200px;margin-right:15px;"></Input>
            <span style="margin-right:5px;">设备地址</span>
            <Input v-model="lanip_data.lanip_ip" style="width: 200px;margin-right:15px;"></Input>
            <span style="margin-right:5px;">设备类型</span>
            <Input v-model="lanip_data.lanip_type" style="width: 200px;margin-right:15px;"></Input>
            <Button type="primary" @click="handleLANIPsSearch" style="margin-right:15px">搜索</Button>
            <Button @click="handleClearLANIPsSearch">重置</Button>
        </div>
        <Table :columns="lanip_data.columns" :data="lanip_data.data" border stripe>
            <template #client_id="{ row }">
                <ClientTableCellValue :client_id="row.client_id" />
            </template>
            <template #lanip_active="{row}">
                <ActiveDescTableCellValue :active_time="row.lanip_alive_time" :now_time="row.now_time" :default_desc="未上线"></ActiveDescTableCellValue>
            </template>
            <template #lanip_enable="{row}">
                <LANIPEnableSwitch :data="row"></LANIPEnableSwitch>
            </template>
            <template #action="{row}">
                <LANIPEditButton :data="row" @success="handleGetLANIPs" style="margin-right: 5px;"></LANIPEditButton>
                <LANIPDeleteButton :data="row" @success="handleGetLANIPs"></LANIPDeleteButton>
            </template>
        </Table>
        <Page :total="lanip_data.page_total" size="small" show-elevator show-sizer show-total style="margin-top: 10px;" @on-change="handleLANIPPageChange" @on-page-size-change="handleLANIPPageSizeChange" />
    </div>
</template>

<script>
import LANIPEditButton from './LANIPEditButton.vue';
import LANIPDeleteButton from './LANIPDeleteButton.vue';
import LANIPEnableSwitch from './LANIPEnableSwitch.vue';
import ClientSelect from './ClientSelect.vue';
import ActiveDescTableCellValue from './ActiveDescTableCellValue.vue';
import ClientTableCellValue from './ClientTableCellValue.vue';

export default {
    name: 'LANIPsView',
    components: {
        LANIPEditButton,
        LANIPDeleteButton,
        LANIPEnableSwitch,
        ClientSelect,
        ActiveDescTableCellValue,
        ClientTableCellValue
    },
    data() {
        return {
            lanip_data: {
                client_id: '',
                lanip_name: '',
                lanip_ip: '',
                lanip_type: '',
                columns: [
                    { title: 'ID', key: 'lanip_id', width: 100, align: 'center' },
                    { title: '设备ID', slot: 'client_id', align: 'center' },
                    { title: '局域网设备名称', key: 'lanip_name', align: 'center' },
                    { title: '局域网设备地址', key: 'lanip_ip', align: 'center' },
                    { title: '局域网设备类型', key: 'lanip_type', align: 'center' },
                    { title: '在线状态', slot: 'lanip_active', align: 'center' },
                    { title: '是否开启检测', slot: 'lanip_enable', width: 80, align: 'center' },
                    { title: '操作', slot: 'action', width: 150, align: 'center' }
                ],
                page_size: 10,
                page_current: 1,
                page_total: 0,
                data: []
            }
        }
    },
    methods: {
        handleLANIPsSearch() {
            this.lanip_data.page_current = 1
            this.handleGetLANIPs()
        },
        handleClearLANIPsSearch() {
            this.lanip_data.client_id = ''
            this.lanip_data.lanip_name = ''
            this.lanip_data.lanip_ip = ''
            this.lanip_data.lanip_type = ''
            this.lanip_data.page_current = 1
            this.handleGetLANIPs()
        },
        handleLANIPPageChange(page) {
            this.lanip_data.page_current = page
            this.handleGetLANIPs()
        },
        handleLANIPPageSizeChange(page_size) {
            this.lanip_data.page_size = page_size
            this.lanip_data.page_current = 1
            this.handleGetLANIPs()
        },
        handleGetLANIPs() {
            let url = '/get_lanips?page_size=' + this.lanip_data.page_size + '&page_current=' + this.lanip_data.page_current
            if (this.lanip_data.client_id != '') {
                url += '&client_id=' + this.lanip_data.client_id
            }
            if (this.lanip_data.lanip_name != '') {
                url += '&lanip_name=' + this.lanip_data.lanip_name
            }
            if (this.lanip_data.lanip_ip != '') {
                url += '&lanip_ip=' + this.lanip_data.lanip_ip
            }
            if (this.lanip_data.lanip_type != '') {
                url += '&lanip_type=' + this.lanip_data.lanip_type
            }
            this.$http.get(url).then(res => {
                let data = res.data
                data.forEach(item => {
                    item.lanip_enable = item.lanip_enable == 1
                    item.now_time = this.$Date().format('YYYY-MM-DD HH:mm:ss')
                })
                this.lanip_data.data = data
            })
        },
    },
    created() {
        this.handleGetLANIPs()
    }
}
</script>